<template>
  <div>
    <el-row type="flex" justify="center">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-dialog :visible.sync="dialogVisible" width="20%" :close-on-click-modal="false" :modal="true" top="180px"
          class="dialog">
          <div class="close_img">
            <el-image src="../../../static/activity/Button.png" class="close_button" @click="handleClose"></el-image>
          </div>
          <el-image :src="Url" @click="goUrl('/register','register')" class="active_img">
          </el-image>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {
        dialogVisible: true,
        Url: '../../../static/activity/Pop-ups.png'
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      handleClose() {
        this.dialogVisible = false;
      },
      goUrl(path, name) {
        this.$router.push({
          path: path,
          name: name
        })
      },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      var Authorization = sessionStorage["token"];
      if (Authorization == null || Authorization === "null" || Authorization.length == 0) {
        this.dialogVisible = true;
      } else {
        this.dialogVisible = false;
      }
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
  }

</script>
<style scoped>
  .active_img {
    width: 400px;
    margin-right: 39px;
  }

  div>>>.el-dialog {
    background-color: transparent;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .contentBox {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  div>>>.el-icon-close {
    display: none;
  }

  div>>>.el-dialog__body {
    padding: 0;
  }
  .close_img{
    position: relative;
    right: -2px;
    cursor: pointer;
    }
  .close_button {
    position: absolute;
    right: 40px;
    padding: 0;
    background: 0 0;
    border: none;
    outline: 0;
    width: 50px;
    z-index: 2002;
  }
  a {
    cursor: pointer;
  }

  /* 媒体查询 */

  @media (max-width: 992px) {}

  @media (max-width: 768px) {

  }

  @media (max-width: 576px) {
    .active_img {
      width: 300px;
    }

    .close_button {
      width: 40px;
    }
    .dialog{
      margin-top: 100px;
    }
  }

  @media (max-width: 414px) {
    .active_img {
      width: 180px;
    }
    .close_button {
      width: 28px;
    }

     
  }

</style>
